<template>
    <div style="height: 100%" class="warp-2 body-content">
        <navbar :title="photo.wcaName || $t('circle_photo_4')">
            <template #left>
                <div class="icon-back-layer" v-if="isCheckbox" @click.stop="() => {isCheckbox = false;selectList = []}"></div>
            </template>
            <template #right>
                <div v-if="isCheckbox" class="add-btn">
                    <a :class="{'add-ok' : selectList.length > 0}" @click.stop="deleteImg">{{ $t('circle_photo_11') }}</a>
                    <a :class="{'add-ok' : selectList.length > 0}" @click.stop="showMoveBox">{{ $t('circle_photo_12') }}</a>
                </div>
                <a class="header-icon-more" @click="moreShow = true" v-else>
                    <ul class="word-btn-list" v-if="moreShow">
                    <router-link tag="li" :to="`/circle/photo/uploadPhotoImg/${photo.wcaId}`" v-if="!photo.isMyImg">{{ $t('circle_photo_13') }}</router-link>
                    <li @click="() => {isCheckbox = true;$nextTick(() => {moreShow = false;})}">{{ $t('circle_photo_14') }}</li>
                    <li @click="toUpdatePhoto" v-if="!photo.isMyImg && isEditOrDelImgBox">{{ $t('circle_photo_15') }}</li>
                    <li @click="deletePhoto" v-if="!photo.isMyImg && isEditOrDelImgBox">{{ $t('circle_photo_16') }}</li>
                </ul>
                </a>
            </template>
        </navbar>
        <div class="content-noBottom">
            <div style="height: 100%;" :class="{'height-100' : total === 0}">
                <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                    <van-list
                    v-model="isLoading"
                    :finished="finished"
                    :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                    loding-text="loading"
                    @load="getPhotoImgListByWcaId"
                    style="padding-bottom: 56px;"
                    >
                        <div v-bind:class="{'height100' : total === 0}">
                            <div style="padding: 10px 10px;" v-if="list.length > 0">
                                <van-checkbox-group v-model="selectList" class="img-list">
                                    <div class="img-item" v-for="(item, index) in list" :key="item.apId" @click="clickImg(item.hasModifiable, item.apId, index)">
                                        <van-image width="100%" height="100%" fit="cover" :src="appUrl + item.apPath"></van-image>
                                        <van-checkbox class="img-checkbox" :name="item.apId" v-show="isCheckbox && item.hasModifiable" @click.stop></van-checkbox>
                                    </div>
                                </van-checkbox-group>
                            </div>
                            <div v-if="!isLoading && total === 0" style="height:100%;">
                                <div class="box-table" style="width:100%;height:100%;">
                                    <div class="box-table-cell" style="text-align: center;">
                                        <div class="no-data">
                                            <img src="../../../../static/images/no-data.png" alt=""/>
                                            <p class="color999">{{ $t("no_data") }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>
        </div>
        <common-loading :isLoading="isLoading"></common-loading>
        <div class="mask-white" v-if="moreShow" @click="moreShow = false"></div>
        <van-action-sheet v-model="isShowMove" :actions="photos" :cancel-text="$t('cancel')" close-on-click-action @select="moveImgToPhoto"/>
    </div>
</template>

<script>
import { Toast, Image, Dialog, Checkbox, CheckboxGroup, ActionSheet, ImagePreview } from 'vant';
export default {
    name: 'PhotoDetail',
    components: {
        vatToast: Toast,
        vanImage: Image,
        vanDialog: Dialog,
        vanCheckbox: Checkbox,
        vanCheckboxGroup: CheckboxGroup,
        vanActionSheet: ActionSheet,
        ImagePreview: ImagePreview
    },
    data() {
        return {
            photo: null,
            total: 0,
            isTop: false,
            pageNo: 0,
            list: [],
            isLoading: false,
            moreShow: false,
            selectList: [],
            isCheckbox: false,
            isShowMove: false,
            photos: [],
            imgList: [],
            userEntId: window.localStorage.getItem('loginUser'),
            isEditOrDelImgBox: false,
            isUpload: false,
            finished: false,
            isRefresh: false
        };
    },
    methods: {
        showMoveBox() {
            if (this.selectList.length > 0) {
                this.isShowMove = true;
            }
        },
        moveImgToPhoto(action) {
            if (this.selectList.length > 0) {
                Dialog.confirm({
                    message: this.$t('circle_photo_17', {'value1': this.selectList.length, 'value2': action.name})
                }).then(() => {
                    this.$axios.put(`/app/api/trainee/work-circle/atlas/picture/move/${action.wcaId}`, this.selectList).then(res => {
                        Toast({message: this.$t('circle_photo_18'), forbidClick: true});
                        this.list = [];
                        this.selectList = [];
                        this.isCheckbox = false;
                        this.isLoading = true;
                        this.onPulldownTop();
                    });
                });
            }
        },
        deleteImg() {
            if (this.selectList.length > 0) {
                Dialog.confirm({
                    message: this.$t('circle_photo_19', {'value': this.selectList.length})
                }).then(() => {
                    this.$axios.put(`/app/api/trainee/work-circle/atlas/picture/batch/${this.photo.wcaWcId}`, this.selectList).then(res => {
                        Toast({message: this.$t('circle_photo_20'), forbidClick: true});
                        this.list = [];
                        this.selectList = [];
                        this.isCheckbox = false;
                        this.isLoading = true;
                        this.onPulldownTop();
                    });
                });
            }
        },
        clickImg(hasModifiable, apId, index) {
            if (this.isCheckbox) {
                if (hasModifiable) {
                    let inx = this.selectList.indexOf(apId);
                    if (inx > -1) {
                        this.selectList.splice(inx, 1);
                    } else {
                        this.selectList.push(apId);
                    }
                } else {
                    Toast({message: this.$t('no_administrative_rights'), forbidClick: true});
                }
            } else {
                ImagePreview({images: this.imgList, startPosition: index});
            }
        },
        toUpdatePhoto() {
            if (this.photo) {
                // item.wcId = this.wcId;
                this.$router.push({path: `/circle/photo/addPhoto`, query: this.photo});
            }
        },
        deletePhoto() {
            this.$nextTick(() => {
                this.moreShow = false;
            });
            Dialog.confirm({
                message: this.$t('circle_photo_21')
            }).then(() => {
                this.$axios.put(`/app/api/trainee/work-circle/atlas/${this.photo.wcaId}`, this.photo).then(res => {
                    Toast({message: this.$t('circle_photo_22'), forbidClick: true});
                    this.$router.go(-1);
                }).catch(res => {
                    Toast({message: res.response.data.errMsg, forbidClick: true});
                });
            });
        },
        getPhotoImgListByWcaId(option) {
            let url;
            if (this.photo.isMyImg) {
                url = `/app/api/trainee/work-circle/atlas/picture/my/${this.photo.wcaWcId}`;
            } else {
                url = `/app/api/trainee/work-circle/atlas/picture/${this.photo.wcaId}`;
            }
            this.$axios.get(url, {
                params: {
                    pageNo: this.pageNo,
                    pageSize: 20
                }
            }).then(res => {
                if (res.data.results && res.data.results.length !== 0) {
                    if (option && option === 'refresh') {
                        this.list = res.data.results;
                        this.previewListHandle(true, res.data.results);
                    } else {
                        this.list = [...this.list, ...res.data.results];
                        this.previewListHandle(false, res.data.results);
                    }
                }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.list.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        previewListHandle(option, list) {
            if (option) {
                let imgList = [];
                list.forEach(item => {
                    imgList.push(this.appUrl + item.apPath);
                });
                this.imgList = imgList;
            } else {
                list.forEach(item => {
                    this.imgList.push(this.appUrl + item.apPath);
                });
            }
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getPhotoImgListByWcaId('refresh');
                this.isRefresh = false;
            }, 900);
        },
        getPhotoListByWcId() {
            this.$axios.get(`/app/api/trainee/work-circle/atlas/all/${this.photo.wcaWcId}`).then(res => {
                if (res.data && res.data.length > 0) {
                    res.data.forEach((item) => {
                        if (item.wcaId !== this.photo.wcaId) {
                            this.photos.push({name: item.wcaName, wcaId: item.wcaId});
                        }
                    });
                }
            });
        }
    },
    created() {
        this.photo = this.$route.query;
        let role = this.photo.currentUserRole;
        this.isEditOrDelImgBox = role === 'GZLEADER' || role === 'MANAGER' || this.photo.wcaCreatorEntId === Number(this.userEntId);
        this.isUpload = role === 'MEMBER';
        this.isLoading = true;
        this.onPulldownTop();
        this.getPhotoListByWcId();
    }
};
</script>

<style scoped lang="less">
    .img-list {
        display: flex;
        align-content: center;
        /*justify-content: space-between;*/
        width: 100%;
        flex-wrap: wrap;
        .img-item {
            width: calc((100% - 10px) / 3);
            height: 32vw;
            margin: 5px 5px 1px 0;
            &:nth-child(3n) {
                margin-right: 0;
            }
            position: relative;
            .img-checkbox {
                position: absolute;
                left: 5px;
                top: 5px;
            }
        }
    }
    .overwrite-title {
        display: flex;
        align-content: center;
        justify-content: center;
        height: 55px;
        line-height: 55px;
        font-size: 18px;
        color: #333;
    }
    .word-btn-list {
        width: 80px;
        padding: 2px 15px;
        background: #ffffff;
        border-radius: 2px;
        position: absolute;
        top: 15px;
        right: 10px;
        z-index: 100;
        box-shadow: 0 1px 2px #cccccc;
        text-align: center;
        li {
            // padding: 15px 0;
            border-bottom: 1px solid #e6e6e6;
            font-size: 14px;
            color: #1a1a1a;
            &:nth-last-child(1) {
                border-bottom: 0;
            }
        }
    }
    .mask-white {
        width: 100%;
        height: 100%;
        background: transparent;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
    }
    .header-icon-more {
        position: relative;
    }
    .add-btn {
        height: 55px;
        line-height: 55px;
        padding: 0 15px;
        font-size: 16px;
        color: #ccc;
    }
    .add-ok {
        color: #1a1a1a !important;
    }
    /deep/.van-dialog__message {
        overflow-y: hidden;
    }
</style>
